<template>
  <div class="container">
      <h1>医疗项目费用与简介</h1>

      <!-- 查询输入框 -->
      <input
          v-model="searchQuery"
          type="text"
          placeholder="按项目名称查询"
          class="search-input"
      />

      <!-- 加载状态 -->
      <div v-if="loading" class="loading">
          <div class="spinner"></div>
          <p>加载中...</p>
      </div>

      <!-- 错误提示 -->
      <div v-if="error" class="error">
          <svg class="error-icon" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
          {{ error }}
      </div>

      <!-- 数据表格 -->
      <div v-if="!loading && !error">
          <table class="table">
              <thead>
                  <tr>
                      <th>ID</th>
                      <th>项目名称</th>
                      <th>项目类型</th>
                      <th>费用</th>
                      <th>描述</th>
                  </tr>
              </thead>
              <tbody>
                  <tr v-for="item in filteredMedicalItems" :key="item.item_id">
                      <td>{{ item.item_id }}</td>
                      <td>{{ item.item_name }}</td>
                      <td>{{ item.item_type }}</td>
                      <td>{{ item.fee.toFixed(2) }}</td>
                      <td>{{ item.description }}</td>
                  </tr>
              </tbody>
          </table>
      </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';

const medicalItems = ref([]);
const loading = ref(true);
const error = ref(null);
const searchQuery = ref('');
const url = '/medicalitem/findAll1';
const fetchData = async () => {
  try {
      loading.value = true;
      const response = await axios.get(url);
      medicalItems.value = response.data;
      console.log('数据加载成功:', medicalItems.value);
  } catch (err) {
      console.error('数据加载失败:', err);
      error.value = `加载数据失败: ${err.message}`;
  } finally {
      loading.value = false;
  }
};

const filteredMedicalItems = computed(() => {
  if (!searchQuery.value) {
      return medicalItems.value;
  }
  return medicalItems.value.filter(item =>
      item.item_name.toLowerCase().includes(searchQuery.value.toLowerCase())
  );
});

onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
  color: #007BFF;
  font-size: 28px;
  margin-bottom: 20px;
}

.search-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s ease;
}

.search-input:focus {
  border-color: #007BFF;
}

.loading {
  text-align: center;
  padding: 20px;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #007BFF;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: 0 auto 10px;
}

@keyframes spin {
  to {
      transform: rotate(360deg);
  }
}

.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  padding: 10px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.error-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  color: #721c24;
}

.table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.table th,
.table td {
  padding: 12px;
  border: 1px solid #ddd;
}

.table th {
  background-color: #007BFF;
  color: white;
}

.table tr:hover {
  background-color: #f5f5f5;
}
</style>    